<template>
  <view>
  	<z-paging ref="paging" v-model="dataList" @query="queryList">
  		<template #top>
  			<tn-navbar>值班记录查询</tn-navbar>
  			<tn-input v-model="phone" placeholder="请输入值班人员手机号" @change="filterData">
  				<template #suffix>
  					<view class="tn-ml tn-mr" @click="filterData">
  						<tn-icon name="search" color=" tn-gray_bg"></tn-icon>
  					</view>
  				</template>
  			</tn-input>
  	 
  		</template>
	   <!-- 值班列表 -->
		<view class="list">
      <view class="  " v-for="(item, index) in dataList" :key="index">
        <view class="    tn-shadow-md tn-p-xs tn-m-sm tn-radius">
          <view class="tn-flex justify-between tn-p-xs ">
            <view class="tn-flex  ">
              <tn-icon name="bankcard" size="40"></tn-icon>
              <text class="tn-pl-sm tn-text-bold  ">{{ item.checkPointName }}</text>
            </view>

            <view class="tn-flex  ">
              <tn-title v-if="item.endDutyTime == 0" class="tn-mr-xs " title="值班中" mode="dot" assist-color="tn-orange-dark" color="tn-orange-dark" />
              <tn-title v-if="item.endDutyTime > 0" class="tn-mr-xs " title="已交班" mode="dot" assist-color="tn-teal-dark" color="tn-teal-dark" />
            </view>
          </view>
          <view class=" tn-m-xs tn-border-top tn-border-dashed tn-grey-disabled_border"></view>
          <view class="  tn-mt-xs tn-p-sm tn-text-center tn-text-sm   ">
            <view class="tn-flex justify-between   tn-pt-sm">
              <view class=" ">
                <text>开始时间:</text>
                <text class="tn-ml-xs  tn-grey_text">{{ item.newStartDutyTime }}</text>
              </view>
              <view class=" tn-text-sm ">
                <text>总金额:</text>
                <text class="tn-orangered_text">￥{{item.totalPay}}</text>
              </view>
            </view>
            <view class="tn-flex justify-between   tn-pt-sm">
              <view class="">
                <text>结束时间:</text>
                <text class="tn-ml-xs tn-grey_text">{{ item.newEndDutyTime }}</text>
              </view>
              <view class="">
                <text>现金:</text>
                <text class=" tn-orangered_text">￥{{ item.cashPayCny }}</text>
              </view>
            </view>
            <view class="tn-flex justify-between   tn-pt-sm">
              <view class="">
                <text>人员:</text>
                <text class="tn-ml-xs tn-grey_text">{{ item.duterName }}</text>
              </view>
              <view class="">
                <text>电子金额:</text>
                <text class=" tn-orangered_text">￥{{ item.weiXinMpPayCny+item.weiXinAppPayCny+item.aliMpPayCny+item.aliAppPayCny+item.storedCardPayCny+item.systemFundAccount+item.coupon }}</text>
              </view>
            </view>
            <view class="tn-flex justify-between items-center tn-text-sm tn-pt-sm">
              <view class="tn-flex-4">
                <text>异常金额:￥{{ item.abnormalPayment }}</text>
              </view>

              <view>
                <tn-button @click="contactDutyer(item)" plain border-color="tn-teal-dark" text-color="tn-teal-dark">
                  <text class="tn-text-bold">联系值班</text>
                </tn-button>
              </view>
            </view>
          </view>
        </view>
      </view>
			
		</view>
		
	<template #loadingMoreNoMore> </template>
	</z-paging>
		
 
  </view>
</template>

<script setup lang="ts">
  import {type Ref, ref} from 'vue';
  import {onLoad} from "@dcloudio/uni-app";
  import CfIOTUtil from "@/cfsheep/api/iot/iot";
  import {parseTime} from "@/cfsheep/util";
  import CfCarParkUtil from "@/cfsheep/api/cfCarPark/park";

  const carParkId = ref(0);
  const phone = ref('');
  const uid = ref(0);

  // z-paging 示例
  const paging = ref(null);
  // 数据列表
  const dataList: Ref<CfDutyLog[]> = ref([]);

  const filterData = (_phone : string) => {
    if (_phone.length == 11) {
      uid.value = phone.value;
    } else {
      uid.value = 0;
    }
  };

  const contactDutyer = async (useLog: CfDutyLog) => {
    if(useLog.dutyerId==null || useLog.dutyerId==0){
      return;
    }
    const _phone = await CfCarParkUtil.getCarParkUseLogDriverPhone({
      id: useLog.id
    });
    if (_phone.code == 10002) {
      uni.makePhoneCall({
        phoneNumber: _phone.data,
      });
    }
  };

  /**
   * 拉取值班记录
   * @param _pageNo
   * @param _pageSize
   */
  const queryList = async (_pageNo : number, _pageSize : number) => {
    const _dataList = await CfIOTUtil.getDutyLogListByQuery({
      page: _pageNo,
      size: _pageSize,
      carParkId: carParkId.value,
      scene: 1,
      orderByDesc: 'start_duty_time'
    });
    if (_dataList.code == 10002) {
      dataList.value = _dataList.data;
      for (const i of _dataList.data) {
        i.newStartDutyTime = parseTime(i.startDutyTime, '{m}-{d} {h}:{i}:{s}') || '-';
        i.newEndDutyTime = parseTime(i.endDutyTime, '{m}-{d} {h}:{i}:{s}') || '-';
      }
    } else {
      dataList.value = [];
    }
    paging.value.complete(dataList.value);
  };

  onLoad((params) => {
    if (params != undefined) {
      carParkId.value = params.id;
    }
  });

</script>

<style scoped>
/* 样式 */
</style>
